{% extends "base.html" %}

{% block title %}学习资源 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .resource-card {
        border-radius: 0.5rem;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .resource-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .resource-header {
        display: flex;
        align-items: center;
        padding: 1rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }
    .resource-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.25rem;
        background-color: #007bff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        margin-right: 1rem;
    }
    .resource-info h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        color: #495057;
    }
    .resource-meta {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    .resource-meta i {
        margin-right: 0.25rem;
    }
    .resource-meta span {
        margin-right: 1rem;
    }
    .resource-body {
        padding: 1rem;
        flex-grow: 1;
    }
    .resource-description {
        color: #6c757d;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .resource-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        background-color: #e9ecef;
        color: #495057;
    }
    .resource-footer {
        padding: 1rem;
        border-top: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .download-stats {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6c757d;
    }
    .download-stats i {
        margin-right: 0.25rem;
    }
    .rating {
        display: flex;
        align-items: center;
    }
    .rating i {
        color: #ffc107;
        margin-right: 0.125rem;
    }
    .search-bar {
        position: relative;
        margin-bottom: 1.5rem;
    }
    .search-bar input {
        padding-left: 2.5rem;
    }
    .search-bar i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
    }
    .category-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        background-color: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .category-item {
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 0.875rem;
        transition: all 0.2s;
    }
    .category-item.active {
        background-color: #007bff;
        color: white;
    }
    .category-item:hover:not(.active) {
        background-color: #f8f9fa;
    }
    .filter-panel {
        background-color: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .filter-title {
        font-weight: 600;
        margin-bottom: 1rem;
        color: #495057;
    }
    .filter-section {
        margin-bottom: 1.5rem;
    }
    .filter-section:last-child {
        margin-bottom: 0;
    }
    .filter-section h4 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #495057;
    }
    .filter-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .filter-option {
        display: flex;
        align-items: center;
    }
    .filter-option input[type="checkbox"] {
        margin-right: 0.5rem;
    }
    .filter-option label {
        margin: 0;
        font-size: 0.875rem;
        color: #495057;
    }
    .filter-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-book mr-2 text-primary"></i>学习资源
    </h1>
    <p class="text-gray-600">发现和分享优质学习资料，助力学业成长</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="row">
    <!-- 左侧筛选区域 -->
    <div class="col-lg-3 col-md-4">
        <div class="filter-panel">
            <h3 class="filter-title">资源筛选</h3>
            
            <!-- 搜索框 -->
            <div class="search-bar mb-4">
                <i class="fa fa-search"></i>
                <input type="text" class="form-control" placeholder="搜索资源名称或标签" id="resource-search">
            </div>
            
            <!-- 资源类型筛选 -->
            <div class="filter-section">
                <h4>资源类型</h4>
                <div class="filter-options">
                    <div class="filter-option">
                        <input type="checkbox" id="type-all" checked>
                        <label for="type-all">全部类型</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-ppt">
                        <label for="type-ppt">PPT课件</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-pdf">
                        <label for="type-pdf">PDF文档</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-doc">
                        <label for="type-doc">Word文档</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-excel">
                        <label for="type-excel">Excel表格</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-video">
                        <label for="type-video">视频教程</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-audio">
                        <label for="type-audio">音频资源</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-code">
                        <label for="type-code">代码文件</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="type-other">
                        <label for="type-other">其他资源</label>
                    </div>
                </div>
            </div>
            
            <!-- 学科分类筛选 -->
            <div class="filter-section">
                <h4>学科分类</h4>
                <div class="filter-options">
                    <div class="filter-option">
                        <input type="checkbox" id="subject-all" checked>
                        <label for="subject-all">全部学科</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-computer">
                        <label for="subject-computer">计算机科学</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-math">
                        <label for="subject-math">数学</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-physics">
                        <label for="subject-physics">物理</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-chemistry">
                        <label for="subject-chemistry">化学</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-biology">
                        <label for="subject-biology">生物</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-english">
                        <label for="subject-english">英语</label>
                    </div>
                    <div class="filter-option">
                        <input type="checkbox" id="subject-economics">
                        <label for="subject-economics">经济学</label>
                    </div>
                </div>
            </div>
            
            <!-- 上传时间筛选 -->
            <div class="filter-section">
                <h4>上传时间</h4>
                <div class="filter-options">
                    <div class="filter-option">
                        <input type="radio" name="time-filter" id="time-all" checked>
                        <label for="time-all">全部时间</label>
                    </div>
                    <div class="filter-option">
                        <input type="radio" name="time-filter" id="time-today">
                        <label for="time-today">今天</label>
                    </div>
                    <div class="filter-option">
                        <input type="radio" name="time-filter" id="time-week">
                        <label for="time-week">本周</label>
                    </div>
                    <div class="filter-option">
                        <input type="radio" name="time-filter" id="time-month">
                        <label for="time-month">本月</label>
                    </div>
                    <div class="filter-option">
                        <input type="radio" name="time-filter" id="time-year">
                        <label for="time-year">今年</label>
                    </div>
                </div>
            </div>
            
            <!-- 筛选按钮 -->
            <div class="filter-actions">
                <button class="btn btn-primary btn-sm flex-1">
                    <i class="fa fa-filter mr-1"></i>筛选
                </button>
                <button class="btn btn-secondary btn-sm flex-1">
                    <i class="fa fa-refresh mr-1"></i>重置
                </button>
            </div>
        </div>
        
        <!-- 资源统计 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mt-4">
            <h3 class="text-md font-semibold mb-3">资源统计</h3>
            <div class="space-y-2">
                <div class="d-flex justify-between">
                    <span class="text-gray-600">总资源数</span>
                    <span class="font-medium">{{ total_resources }}</span>
                </div>
                <div class="d-flex justify-between">
                    <span class="text-gray-600">今日新增</span>
                    <span class="font-medium text-primary">{{ today_added }}</span>
                </div>
                <div class="d-flex justify-between">
                    <span class="text-gray-600">总下载量</span>
                    <span class="font-medium">{{ total_downloads }}</span>
                </div>
                <div class="d-flex justify-between">
                    <span class="text-gray-600">平均评分</span>
                    <span class="font-medium">
                        {% for i in range(5) %}
                            {% if i < average_rating %}
                                <i class="fa fa-star text-yellow-400"></i>
                            {% else %}
                                <i class="fa fa-star-o text-gray-300"></i>
                            {% endif %}
                        {% endfor %}
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 右侧资源列表 -->
    <div class="col-lg-9 col-md-8">
        <!-- 资源分类导航 -->
        <div class="category-nav">
            <div class="category-item active" data-category="all">全部资源</div>
            <div class="category-item" data-category="hot">热门推荐</div>
            <div class="category-item" data-category="new">最新上传</div>
            <div class="category-item" data-category="highly-rated">高分好评</div>
            <div class="category-item" data-category="most-downloaded">下载最多</div>
            <div class="category-item" data-category="my-resources">我的资源</div>
            <div class="category-item" data-category="collections">我的收藏</div>
        </div>
        
        <!-- 排序选项 -->
        <div class="bg-white rounded-lg shadow-sm p-3 mb-4 flex justify-between items-center">
            <div class="text-sm text-gray-600">共找到 {{ filtered_resources }} 个资源</div>
            <div class="d-flex items-center">
                <span class="text-sm text-gray-600 mr-2">排序方式：</span>
                <select class="form-control form-control-sm">
                    <option value="newest">最新上传</option>
                    <option value="downloads">下载最多</option>
                    <option value="rating">评分最高</option>
                    <option value="name">名称排序</option>
                </select>
            </div>
        </div>
        
        <!-- 上传资源按钮 -->
        {% if current_user.is_authenticated %}
        <div class="mb-4">
            <a href="{{ url_for('upload_resource') }}" class="btn btn-success">
                <i class="fa fa-upload mr-2"></i>上传资源
            </a>
        </div>
        {% endif %}
        
        <!-- 资源列表 -->
        <div class="row">
            {% if resources %}
                {% for resource in resources %}
                <div class="col-lg-6 col-md-12 mb-4">
                    <div class="resource-card">
                        <div class="resource-header">
                            <div class="resource-icon">
                                {% if resource.type == 'ppt' %}
                                    <i class="fa fa-file-powerpoint-o"></i>
                                {% elif resource.type == 'pdf' %}
                                    <i class="fa fa-file-pdf-o"></i>
                                {% elif resource.type == 'doc' %}
                                    <i class="fa fa-file-word-o"></i>
                                {% elif resource.type == 'excel' %}
                                    <i class="fa fa-file-excel-o"></i>
                                {% elif resource.type == 'video' %}
                                    <i class="fa fa-file-video-o"></i>
                                {% elif resource.type == 'audio' %}
                                    <i class="fa fa-file-audio-o"></i>
                                {% elif resource.type == 'code' %}
                                    <i class="fa fa-file-code-o"></i>
                                {% else %}
                                    <i class="fa fa-file-o"></i>
                                {% endif %}
                            </div>
                            <div class="resource-info">
                                <h3>{{ resource.title }}</h3>
                                <div class="resource-meta">
                                    <span><i class="fa fa-user-o"></i>{{ resource.uploader.username }}</span>
                                    <span><i class="fa fa-calendar-o"></i>{{ resource.upload_time.strftime('%Y-%m-%d') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="resource-body">
                            <p class="resource-description">{{ resource.description }}</p>
                            <div class="resource-tags">
                                {% for tag in resource.tags.split(',') %}
                                <span class="tag">{{ tag }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="resource-footer">
                            <div class="download-stats">
                                <span><i class="fa fa-download"></i>{{ resource.downloads }}</span>
                                <span><i class="fa fa-eye"></i>{{ resource.views }}</span>
                            </div>
                            <div class="rating">
                                {% for i in range(5) %}
                                    {% if i < resource.rating %}
                                        <i class="fa fa-star"></i>
                                    {% else %}
                                        <i class="fa fa-star-o"></i>
                                    {% endif %}
                                {% endfor %}
                                <span class="ml-1 text-sm text-gray-600">{{ resource.rating }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="col-12 text-center py-10">
                    <i class="fa fa-folder-open-o text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">暂无资源记录</p>
                    {% if current_user.is_authenticated %}
                    <a href="{{ url_for('upload_resource') }}" class="btn btn-primary mt-3">
                        <i class="fa fa-upload mr-2"></i>上传第一个资源
                    </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        
        <!-- 分页控制 -->
        {% if total_pages > 1 %}
        <div class="pagination">
            <nav aria-label="资源分页">
                <ul class="pagination">
                    {% if current_page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for page_num in range(1, total_pages + 1) %}
                    {% if page_num == current_page %}
                    <li class="page-item active">
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                    {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                    {% endif %}
                    {% endfor %}
                    
                    {% if current_page < total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 资源类型全选/取消全选
    const typeAllCheckbox = document.getElementById('type-all');
    const typeCheckboxes = document.querySelectorAll('input[id^="type-"][id!="type-all"]');
    
    typeAllCheckbox.addEventListener('change', function() {
        typeCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    
    typeCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // 检查是否所有类型都被选中
            const allChecked = Array.from(typeCheckboxes).every(cb => cb.checked);
            typeAllCheckbox.checked = allChecked;
            
            // 如果全选被选中，则取消选中
            if (typeAllCheckbox.checked && !this.checked) {
                typeAllCheckbox.checked = false;
            }
        });
    });
    
    // 学科分类全选/取消全选
    const subjectAllCheckbox = document.getElementById('subject-all');
    const subjectCheckboxes = document.querySelectorAll('input[id^="subject-"][id!="subject-all"]');
    
    subjectAllCheckbox.addEventListener('change', function() {
        subjectCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    
    subjectCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // 检查是否所有学科都被选中
            const allChecked = Array.from(subjectCheckboxes).every(cb => cb.checked);
            subjectAllCheckbox.checked = allChecked;
            
            // 如果全选被选中，则取消选中
            if (subjectAllCheckbox.checked && !this.checked) {
                subjectAllCheckbox.checked = false;
            }
        });
    });
    
    // 资源分类导航点击事件
    const categoryItems = document.querySelectorAll('.category-item');
    
    categoryItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有分类项的活跃状态
            categoryItems.forEach(catItem => {
                catItem.classList.remove('active');
            });
            
            // 添加当前分类项的活跃状态
            this.classList.add('active');
            
            // 获取分类ID
            const category = this.getAttribute('data-category');
            
            // 这里应该触发分类筛选
            console.log('选择了分类:', category);
            
            // 模拟加载效果
            const resourceCards = document.querySelectorAll('.resource-card');
            resourceCards.forEach(card => {
                card.style.opacity = '0.5';
            });
            
            setTimeout(() => {
                resourceCards.forEach(card => {
                    card.style.opacity = '1';
                });
            }, 500);
        });
    });
    
    // 搜索框回车事件
    document.getElementById('resource-search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            // 这里应该触发搜索
            console.log('搜索内容:', this.value);
            
            // 模拟加载效果
            const resourceCards = document.querySelectorAll('.resource-card');
            resourceCards.forEach(card => {
                card.style.opacity = '0.5';
            });
            
            setTimeout(() => {
                resourceCards.forEach(card => {
                    card.style.opacity = '1';
                });
            }, 500);
        }
    });
    
    // 资源卡片点击事件
    const resourceCards = document.querySelectorAll('.resource-card');
    resourceCards.forEach(card => {
        card.addEventListener('click', function() {
            // 获取资源ID（实际项目中应该有一个数据属性来存储ID）
            const resourceId = this.getAttribute('data-id') || 1;
            
            // 跳转到资源详情页
            window.location.href = `{{ url_for('resource_detail', id=1) }}`.replace('/1', `/${resourceId}`);
        });
    });
    
    // 资源卡片悬停动画
    resourceCards.forEach((card, index) => {
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 * index);
    });
    
    // 筛选重置按钮点击事件
    const resetButton = document.querySelector('.btn-secondary');
    resetButton.addEventListener('click', function() {
        // 重置类型选择
        typeAllCheckbox.checked = true;
        typeCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        
        // 重置学科选择
        subjectAllCheckbox.checked = true;
        subjectCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        
        // 重置时间筛选
        document.getElementById('time-all').checked = true;
        
        // 清空搜索框
        document.getElementById('resource-search').value = '';
        
        // 重置分类导航
        categoryItems.forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector('.category-item[data-category="all"]').classList.add('active');
    });
    
    // 筛选按钮点击事件
    const filterButton = document.querySelector('.btn-primary');
    filterButton.addEventListener('click', function() {
        // 模拟加载效果
        const resourceCards = document.querySelectorAll('.resource-card');
        resourceCards.forEach(card => {
            card.style.opacity = '0.5';
        });
        
        setTimeout(() => {
            resourceCards.forEach(card => {
                card.style.opacity = '1';
            });
        }, 500);
    });
</script>
{% endblock %}